<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>
    <view class="ai">
        <view class="header">
            <image
                class="meau"
                src="/static/images/icon/meau_icon.png"
                mode="widthFix"
                @click="showProp"
            ></image>
            <view class="title">言小问</view>
            <image
                class="more"
                src="/static/images/icon/more_icon.png"
                mode="widthFix"
                @click="goMore"
            ></image>
            <image
                class="delete"
                src="/static/images/icon/delete_icon2.png"
                mode="widthFix"
                @click="deleteMessage('', 1)"
                v-if="state.conversation_id"
            ></image>
        </view>
        <view class="header-blank"></view>
        <view class="conent" id="chat">
            <view class="chat-top" v-if="state.isShowMessageTop">
                <image class="avater" src="/static/images/icon/avatar.png" mode="widthFix"></image>
                <view class="subs" v-if="state.suggestionsTitle">{{ state.suggestionsTitle }}</view>
                <view class="lists" v-if="state.suggestionsQuestions.length > 0">
                    <view
                        class="li"
                        v-for="(item, index) in state.suggestionsQuestions"
                        :key="index"
                        @click="sendMessage(item)"
                    >
                        {{ item }}</view
                    >
                </view>
            </view>
            <view class="chat-messages" v-else>
                <view class="item assistant">
                    <image
                        class="avater"
                        src="/static/images/icon/avatar.png"
                        mode="widthFix"
                    ></image>
                    <view class="con">
                        <view class="subs" v-if="state.suggestionsTitle">{{
                            state.suggestionsTitle
                        }}</view>
                        <view class="lists" v-if="state.suggestionsQuestions.length > 0">
                            <view
                                class="li"
                                v-for="(item, index) in state.suggestionsQuestions"
                                :key="index"
                                @click="sendMessage(item)"
                            >
                                {{ item }}</view
                            >
                        </view>
                    </view>
                </view>
                <view
                    v-for="(msg, index) in state.MessageLists"
                    :key="index"
                    class="item"
                    :class="{ user: msg.is_user, assistant: !msg.is_user }"
                >
                    <image class="avater" :src="msg.avatar" mode="widthFix"></image>
                    <view class="con" v-if="!msg.is_error"
                        ><rich-text :nodes="msg.content"></rich-text
                    ></view>
                    <view class="con" v-else @click="sendMessage(state.errorValue)"
                        ><rich-text :nodes="msg.content"></rich-text
                    ></view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="sug" v-if="state.suggestions.length > 0 && !state.suggestionsLoading">
                <text class="t">Try to ask</text>
                <ul>
                    <li
                        v-for="(item, index) in state.suggestions"
                        :key="index"
                        class="item"
                        @click="sendMessage(item)"
                    >
                        {{ item }}
                    </li>
                </ul>
            </view>
            <view class="loading" v-if="state.suggestionsLoading">
                <image class="img" :src="state.loadingUrl" mode="widthFix"></image>加载中...
            </view>
            <view class="control">
                <input
                    class="input"
                    focus
                    placeholder="Talk to 言小问"
                    v-model="state.MessageValue"
                />
                <image
                    src="/static/images/icon/go_btn2.png"
                    class="btn"
                    v-if="state.btnDisabled"
                ></image>
                <image
                    src="/static/images/icon/go_btn.png"
                    class="btn"
                    @click="sendMessage('')"
                    v-if="!state.btnDisabled"
                ></image>
            </view>
            <view class="tips">由言小问AI生成</view>
        </view>
        <view class="footer-blank"></view>
        <view class="historyprop" v-if="state.isVisible">
            <view class="gray-bg"></view>
            <view class="in">
                <image
                    class="close"
                    src="/static/images/icon/close_icon.png"
                    mode="widthFix"
                    @click="state.isVisible = false"
                ></image>
                <view class="top">
					<image
					    class="avater"
					    :src="userStore.userInfo.avatar || '/static/images/icon/assistant.png'"
					    mode="widthFix"
						@click="goUserData"
					></image>
					<view class="name">{{ userStore.userInfo.nickname || '匿名' }}</view>
					<view class="tel">账号：{{ userStore.userInfo.account || '' }}</view>
                    <image
                        class="user"
                        src="/static/images/icon/user_icon.png"
                        mode="widthFix"
                        @click="goUser"
                    ></image>
                </view>
                <view class="title">
                    言小问对话记录
                    <view class="btn" v-if="!state.isManger" @click="state.isManger = true"
                        >退出管理</view
                    >
                    <view class="btn" v-else @click="state.isManger = false">管理</view>
                </view>
                <scroll-view
                    scroll-y="true"
                    refresher-threshold="200"
                    refresher-background="#fff"
                    @scrolltolower="loadMore"
                    class="lists"
                >
                    <view class="inner" v-if="!state.HistoryLoading">
                        <view class="li" v-for="(item, index) in state.HistoryLists" :key="index">
                            <view class="name" @click="getMessage(item.id)">{{ item.name }}</view>
                            <view class="time" v-if="state.isManger">{{ item.time }}</view>
                            <image
                                class="delete"
                                src="/static/images/icon/delete_icon.png"
                                mode="widthFix"
                                v-else
                                @click="deleteMessage(item.id, 2)"
                            ></image>
                        </view>
                        <view class="nomore" v-if="!state.has_more">没有更多了</view>
                    </view>
                    <view class="proploading" v-else>加载中...</view>
                </scroll-view>
                <!-- <view class="lists"> </view> -->
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { computed, reactive, ref, nextTick, getCurrentInstance } from 'vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import config from '@/config/index'
import {
    chatMessages,
    suggested,
    deleteConversation,
    PromptConfig,
    parameters,
    stop,
    getHistory,
    getMessages
} from '@/api/ai'
import { getRect, navigateTo, timestampToDate } from '@/utils/util'
const ctx = getCurrentInstance()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)

const state = reactive({
    model_type: false,
    opening_statement: '',
    prompt: '',
    MessageValue: '',
    conversation_id: '',
    task_id: '',
    message_id: '',
    suggestionsTitle: '',
    suggestionsQuestions: [],
    suggestions: [],
    isShowMessageTop: true,
    btnDisabled: false,
    errorValue: '',
    isVisible: false,
    isManger: true,
    isRefreshing: false,
    first_id: '',
    last_id: '',
    MessageLists: [] as {
        is_user: boolean
        is_loading: boolean
        is_error: boolean
        avatar: string
        content: any
    }[], // 用于存储聊天消息
    HistoryLists: [] as {
        name: string
        id: string
        time: string
    }[], // 用于存储历史
    has_more: true, // 是否还有更多历史记录
    HistoryLoading: false, // 是否正在加载历史记录
    history_id: '',
    loadingUrl: 'https://uat-ghac.obs.cn-south-1.myhuaweicloud.com/a/loading.gif',
    suggestionsLoading: false
})

onLoad(() => {
    getPromptConfig()
})
//获取提示词和开场白
const getPromptConfig = async () => {
    uni.showLoading({
        title: '加载中'
    })
    try {
        const res = await PromptConfig({tenant_id:config.tenantId})
        state.model_type = res.model_type
        if (res.prompts_list.length > 0) {
            state.prompt = res.prompts_list[0].prompt
            state.opening_statement = res.prompts_list[0].opening_statement
        }
        getParameter()
    } catch (error) {
        console.error('获取parameters失败:', error)
    }
}
//获取建议列表
const getParameter = async () => {
    try {
        const res = await parameters()
        if (res && res.data && res.data.suggested_questions) {
            state.suggestionsTitle = res.data.opening_statement
            state.suggestionsQuestions = res.data.suggested_questions
        }
    } catch (error) {
        console.error('获取建议失败:', error)
    }
    uni.hideLoading()
}
// 发送对话消息
const sendMessage = async (obj: any) => {
    if(!isLogin.value) {
        uni.showToast({
            title: '请先登录',
            duration: 2000,
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateTo({
                url: '/pages/login/login'
            })
        }, 2000)
        return
    }
    const MessageValue = obj || state.MessageValue
    if (!MessageValue) {
        uni.showToast({
            title: '请输入发送内容',
            duration: 2000,
            icon: 'none'
        })
        return
    }
    if (state.btnDisabled) return
    state.btnDisabled = true
    state.isShowMessageTop = false
    state.suggestionsLoading = true
    // 移除所有 is_loading: true 的对象
    state.MessageLists = state.MessageLists.filter((msg) => !msg.is_loading)
    state.MessageLists.push({
        is_user: true,
        is_loading: true,
        is_error: false,
        avatar: '/static/images/icon/assistant.png',
        content: MessageValue.replace(/[\r\n↵]/g, '<br/>')
    })
    state.MessageLists.push({
        is_user: false,
        is_loading: true,
        is_error: false,
        avatar: '/static/images/icon/avatar.png',
        content:
            '<div class="loading"><img class="img" src="' + state.loadingUrl + '" />加载中...</div>'
    })
    backToTop()
    const chatData = {
        inputs: {
            prompt_template: state.prompt, // 使用用户输入的消息作为提示模板
            use_finetuned_model: state.model_type
        },
        conversation_id: state.conversation_id,
        task_id: state.task_id,
        query: MessageValue, // 查询内容
        response_mode: 'blocking',
        user: userStore.userInfo.account || ''
    }
    try {
        const res = await chatMessages(chatData)
        // 移除所有 is_loading: true 的对象
        state.MessageLists = state.MessageLists.filter((msg) => !msg.is_loading)
        state.MessageLists.push({
            is_user: true,
            is_loading: false,
            is_error: false,
            avatar: '/static/images/icon/assistant.png',
            content: MessageValue.replace(/[\r\n↵]/g, '<br/>')
        })
        if (res && res.data) {
            state.conversation_id = res.data.conversation_id
            state.task_id = res.data.task_id
            state.message_id = res.data.message_id
            state.MessageLists.push({
                is_user: false,
                is_loading: false,
                is_error: false,
                avatar: '/static/images/icon/avatar.png',
                content: res.data.answer.replace(/[\r\n↵]/g, '<br/>')
            })
        } else {
            state.MessageLists.push({
                is_user: false,
                is_loading: false,
                is_error: false,
                avatar: '/static/images/icon/avatar.png',
                content: '<div class="loading">暂无数据</div>'
            })
        }
        suggestedLists()
        state.MessageValue = '' // 清空输入框
        state.btnDisabled = false
        backToTop()
    } catch (error) {
        // 移除所有 is_loading: true 的对象
        state.MessageLists = state.MessageLists.filter((msg) => !msg.is_loading)
        state.MessageLists.push({
            is_user: true,
            is_loading: true,
            is_error: false,
            avatar: '/static/images/icon/assistant.png',
            content: MessageValue.replace(/[\r\n↵]/g, '<br/>')
        })
        state.MessageLists.push({
            is_user: false,
            is_loading: true,
            is_error: true,
            avatar: '/static/images/icon/avatar.png',
            content:
                '<div class="loading"><img class="img" src="' +
                state.loadingUrl +
                ' />发送失败，请点击重新加载...</div>'
        })
        state.btnDisabled = false
        state.errorValue = MessageValue
        backToTop()
    }
}
const suggestedLists = async () => {
    state.suggestions = []
    // 获取下一轮建议问题列表
    const suggestedRes = await suggested(state.message_id, {
        user: userStore.userInfo.account || ''
    })
    state.suggestions = suggestedRes.data.data || [] // 假设返回的数据中包含suggestions数组
    state.suggestionsLoading = false
}
const backToTop = () => {
    // 滚动到底部
    setTimeout(async () => {
        const obj: any = await getRect('#chat', false, ctx)
        if (obj && typeof obj.height !== 'undefined') {
            uni.pageScrollTo({
                scrollTop: obj.height, // 这里应该是 obj.height 而不是 data.height
                duration: 200
            })
        } else {
            console.error('获取的对象高度属性未定义或对象未正确获取')
        }
    }, 200)
}
// 停止响应
const stopConversation = async () => {
    try {
        const res = await stop(state.task_id, {
            user: userStore.userInfo.account || ''
        })
        state.btnDisabled = false
    } catch (error) {
        console.error('删除会话失败:', error)
    }
}
// 删除会话
const deleteMessage = async (id: any, type: any) => {
    const conversation_id = id || state.conversation_id
    uni.showModal({
        title: '提示',
        content: '是否确认删除',
        success: async function (res) {
            if (res.confirm) {
                try {
                    const res = await deleteConversation(conversation_id, {
                        user: userStore.userInfo.account || ''
                    })
                    // 重置会话ID或其他相关状态
                    if (type == 1) {
                        state.MessageLists = []
                        state.conversation_id = ''
                        state.task_id = ''
                        state.message_id = ''
                        state.suggestions = []
                        state.MessageValue = ''
                    } else {
                        reLoadMore()
                    }
                } catch (error) {
                    console.error('删除会话失败:', error)
                }
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        }
    })
}
const goMore = () => {
    uni.navigateTo({
        url: '/pages/ai/more'
    })
}
const goUser = () => {
    uni.navigateTo({
        url: '/pages/user_set/user_set'
    })
}

const goUserData = () => {
	uni.navigateTo({
		url: '/pages/user_data/user_data'
	})
}

// const onRefresh = async () => {
//     state.isRefreshing = true
//     // 执行刷新操作，完成后将 isRefreshing 设置为 false
//     reLoadMore()
// }

const showProp = async () => {
    state.isVisible = true
    reLoadMore()
}
const reLoadMore = async () => {
    state.HistoryLists = []
    state.last_id = ''
    state.has_more = true
    state.HistoryLoading = true
    setTimeout(() => {
        state.isRefreshing = false
        if (userStore.userInfo.account) {
            loadMore()
        }
    }, 1000)
}
const loadMore = async () => {
    if (!state.has_more) {
        state.HistoryLoading = false
        return
    }
    const historyRes = await getHistory({
        user: userStore.userInfo.account || '',
        last_id: state.last_id || '',
        limit: 20
    })
    if (historyRes.data && historyRes.data.data && historyRes.data.data.length > 0) {
        const historyLists = historyRes.data.data.map((item: any) => {
            return {
                name: item.name,
                id: item.id,
                created_at: item.created_at,
                time: timestampToDate(item.created_at, 'YYYY-MM-DD')
            }
        })
        state.HistoryLists = state.HistoryLists.concat(historyLists)
        state.last_id = historyLists[historyLists.length - 1].id
        state.has_more = historyRes.data.has_more
        state.HistoryLoading = false
    } else {
        state.has_more = false
        state.HistoryLoading = false
    }
}
const getMessage = async (conversation_id: any) => {
    state.isShowMessageTop = false
    state.isVisible = false
    state.MessageLists = []
    state.first_id = ''
    state.history_id = conversation_id
    loadMoreMessage()
}
const loadMoreMessage = async () => {
    const chatData = {
        conversation_id: state.history_id,
        user: userStore.userInfo.account || '',
        first_id: state.first_id,
        limit: 100
    }
    try {
        const res = await getMessages(chatData)
        if (res.data && res.data.data && res.data.data.length > 0) {
            const lists = res.data.data
            state.conversation_id = state.history_id
            state.first_id = lists[lists.length - 1].id
            lists.map((item: any) => {
                state.task_id = res.data.task_id
                state.MessageLists.push({
                    is_user: true,
                    is_loading: false,
                    is_error: false,
                    avatar: '/static/images/icon/assistant.png',
                    content: item.query.replace(/[\r\n↵]/g, '<br/>')
                })
                state.MessageLists.push({
                    is_user: false,
                    is_loading: false,
                    is_error: false,
                    avatar: '/static/images/icon/avatar.png',
                    content: item.answer.replace(/[\r\n↵]/g, '<br/>')
                })
            })
        } else {
            state.MessageLists = []
        }
        state.MessageValue = '' // 清空输入框
        backToTop()
    } catch (error) {
        state.MessageLists = []
        state.MessageValue = ''
    }
}
// onPageScroll((event: any) => {
//     loadMoreMessage()
//     console.log(event.scrollTop)
// })
</script>

<style lang="scss">
@font-face {
    font-family: 'PingFang SC-Medium';
    src: url('https://uat-ghac.obs.cn-south-1.myhuaweicloud.com/a/PingFang Medium.ttf')
        format('truetype');
    font-weight: 500; /* 设置为正确的font-weight */
    font-style: normal;
}
@font-face {
    font-family: 'PingFang SC-Bold';
    src: url('https://uat-ghac.obs.cn-south-1.myhuaweicloud.com/a/PingFang Bold.ttf')
        format('truetype');
    font-weight: 700; /* 设置为正确的font-weight */
    font-style: normal;
}
page {
    background: linear-gradient(270deg, #e1e8f8 0%, #e0eff7 100%);
}
.ai {
    height: 100%;
    width: 100%;
    overflow: hidden;
    color: #000000;
    font-family: 'PingFang SC-Bold';
    font-family: 'PingFang SC-Medium';
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin: auto;
        line-height: 84rpx;
        text-align: center;
        background: linear-gradient(270deg, #e1e8f8 0%, #e0eff7 100%);
        padding-top: 160rpx;
        .title {
            font-size: 40rpx;
        }
        .meau,
        .more,
        .delete {
            width: 44rpx;
            position: absolute;
            z-index: 1;
            top: 180rpx;
            height: 44rpx;
            cursor: pointer;
        }
        .meau {
            left: 30rpx;
        }
        .more {
            right: 30rpx;
        }
        .delete {
            top: 183rpx;
            width: 35rpx;
            height: 35rpx;
            right: 100rpx;
        }
    }
    .header-blank {
        width: 100%;
        height: 260rpx;
    }

    .conent {
        padding: 20rpx 40rpx 50rpx;
        font-size: 30rpx;
        line-height: 1.6;
        box-sizing: border-box;
        .chat-top {
            .avater {
                width: 240rpx;
                height: 240rpx;
                margin: 40rpx auto 100rpx;
                display: block;
                border-radius: 100%;
                border: #fff 4rpx solid;
                background: linear-gradient(130deg, #f4f4ff 4%, #cdecfd 100%);
            }
            .subs {
                font-size: 32rpx;
                font-family: 'PingFang SC-Bold';
                margin-bottom: 35rpx;
            }
            .lists {
                .li {
                    line-height: 40rpx;
                    border: #fff 4rpx solid;
                    border-radius: 180rpx;
                    margin-bottom: 20rpx;
                    padding: 20rpx 40rpx;
                    cursor: pointer;
                }
            }
        }
    }
    .chat-messages {
        font-size: 24rpx;
        .item {
            margin-bottom: 30rpx;
            &::after {
                content: '';
                display: block;
                clear: both;
                overflow: hidden;
            }
            .avater {
                width: 80rpx;
                height: 80rpx;
                overflow: hidden;
                border-radius: 100%;
                border: #fff 2rpx solid;
                background: linear-gradient(130deg, #f4f4ff 4%, #cdecfd 100%);
            }
            .con {
                overflow: hidden;
                padding: 20rpx;
                border-radius: 15rpx;
                box-shadow: rgba($color: #000000, $alpha: 0.05) 0 0 15rpx;
                background-color: #fff;
                .subs {
                    overflow: hidden;
                }
                .lists {
                    overflow: hidden;
                    font-size: 22rpx;
                    .li {
                        line-height: 40rpx;
                        border: #fff 4rpx solid;
                        background-color: #f4f4ff;
                        border-radius: 40rpx;
                        // margin-right: 20rpx;
                        display: inline-block;
                        padding: 0 10rpx;
                        color: #6294ff;
                        margin-top: 10rpx;
                        cursor: pointer;
                        display: inline-block;
                    }
                }
            }
            &.assistant {
                .avater {
                    margin-right: 20rpx;
                    float: left;
                }
                .con {
                    background-color: #fff;
                }
            }
            &.user {
                .avater {
                    margin-left: 20rpx;
                    float: right;
                }
                .con {
                    background-color: #e1effe;
                    float: right;
                }
            }
        }
        .loading {
            font-size: 22rpx;
            line-height: 40rpx;
            overflow: hidden;
            color: #666;
            .img {
                width: 50rpx;
                height: 50rpx;
                margin-right: 10rpx;
                vertical-align: middle;
            }
        }
    }
    .footer {
        padding: 20rpx 40rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin: auto;
        background: linear-gradient(270deg, #e1e8f8 0%, #e0eff7 100%);
        .loading {
            text-align: center;
            margin-bottom: 20rpx;
            font-size: 22rpx;
            line-height: 40rpx;
            overflow: hidden;
            color: #9999;
            .img {
                width: 50rpx;
                height: 50rpx;
                margin-right: 10rpx;
                vertical-align: middle;
            }
        }
        .sug {
            overflow: hidden;
            text-align: center;
            margin-bottom: 20rpx;
            font-size: 22rpx;
            line-height: 40rpx;
            .t {
                color: #9999;
                margin-bottom: 10rpx;
            }
            .item {
                display: inline-block;
                padding: 0 10rpx;
                color: #6294ff;
            }
        }
        .control {
            position: relative;
            overflow: hidden;
            margin-bottom: 15rpx;
            box-shadow: rgba($color: #000000, $alpha: 0.05) 0 0 15rpx;
            background-color: #fff;
            border-radius: 180rpx;
            .input {
                padding: 0 30rpx;
                line-height: 80rpx;
                height: 80rpx;
                padding-right: 80rpx;
            }
            .btn {
                width: 60rpx;
                height: 60rpx;
                position: absolute;
                margin: auto;
                z-index: 2;
                top: 0;
                bottom: 0;
                display: block;
                right: 20rpx;
                cursor: pointer;
            }
        }
        .tips {
            text-align: center;
            color: #c5c5c5;
            font-size: 20rpx;
        }
    }
    .footer-blank {
        width: 100%;
        height: 250rpx;
    }
    .historyprop {
        position: fixed;
        z-index: 200;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        box-sizing: border-box;
        animation: showprop 0.1s linear;
        .gray-bg {
            background-color: rgba($color: #000, $alpha: 0);
        }
        .in {
            background-color: #f8fafc;
            padding: 40rpx 30rpx;
            padding-top: 160rpx;
            width: 95%;
            height: 100vh;
            box-sizing: border-box;
            position: relative;
        }
        .close {
            width: 50rpx;
            height: 50rpx;
            position: absolute;
            z-index: 2;
            left: 40rpx;
            top: 80rpx;
            cursor: pointer;
        }
        .top {
            margin-bottom: 40rpx;
            position: relative;
            overflow: hidden;
            font-size: 32rpx;
            .avater {
                width: 100rpx;
                height: 100rpx;
                border-radius: 100%;
                overflow: hidden;
                margin-right: 24rpx;
                float: left;
                border: #fff 4rpx solid;
                background: linear-gradient(130deg, #f4f4ff 4%, #cdecfd 100%);
            }
            .name,
            .tel {
                overflow: hidden;

                font-family: 'PingFang SC-Bold';
            }
            .name {
                margin-top: 10rpx;
                // margin-bottom: 10rpx;
            }
            .user {
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                z-index: 2;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }
        .title {
            margin-bottom: 30rpx;
            font-size: 32rpx;
            position: relative;
            font-family: 'PingFang SC-Bold';
            .btn {
                color: #666666;
                font-size: 28rpx;
                position: absolute;
                z-index: 2;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                cursor: pointer;
                font-weight: 400;
            }
        }
        .proploading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300rpx;
        }
        .inner {
            position: relative;
            padding-bottom: 80rpx;
        }
        .nomore {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24rpx;
            color: #999999;
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            bottom: 1rpx;
        }
        .lists {
            background: #ffffff;
            border-radius: 20rpx;
            padding: 40rpx 0;
            height: 70vh;

            box-sizing: border-box;
            width: 100%;
            position: relative;
            .li {
                position: relative;
                margin-bottom: 40rpx;
                padding: 0 180rpx 0 30rpx;
                .delete {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    z-index: 2;
                    right: 30rpx;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
                .time {
                    position: absolute;
                    z-index: 2;
                    right: 30rpx;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
        }
    }
    @keyframes showprop {
        0% {
            transform: translate(-100%, 0);
        }
        100% {
            transform: translate(0, 0);
        }
    }
}
</style>
